<template>
  <div class="wrapper">
    <minbar title="我的优惠券" :isPadding="true" @rightButtonClick="openCenter" :rightButton="true">
        <text slot="right" class="right-title" >领券</text>
    </minbar>
    <!-- 顶部的tab页 -->
    <x-toptab :tabTitles="tabTitles" @itemClick="tabItemClick"></x-toptab>
    <x-list 
      class="x-list" 
      ref="clist"
      :config="configData" 
      :param="listparam" 
      @receiveData="receiveData" >
      <div slot="content">
        <x-listpage :listData="listData" :ctype="currentType"></x-listpage>
      </div>
    </x-list>
    <div v-if="nodata" class="x-nodata"> 
      <text class="iconfont x-nodata-icon">&#xe679;</text>
      <text class="x-nodata-font">没有可用的优惠券~</text>
    </div>
  </div>
</template>

<script>
import asCore from "../../../common/js/core";
const navigator = weex.requireModule('navigator');
export default { 
  components: {
    "minbar" : require("../../../common/component/minbar.vue"),
    "x-toptab" : require("../../../common/component/toptab.vue"),
    "x-listpage" : require("./comp/couponPage.vue"),
    "x-list": require("../../../common/component/list.vue")
  },
  data() {
    return {
      currentType:1,
      nodata:false,
      configData:{
        pageRow:{
          page:1,
          limit:10
        },
        action:"/coupon/received"
      },
      listparam:{
        state:1
      },
      listData:[],
      tabTitles:[{
          title:"可使用",
          code:1
        },
        {
          title:"已使用",
          code:2
        },
        {
          title:"已过期",
          code:3
      }]
    };
  },
  methods: {
    tabItemClick(code,index){
        this.currentType = code;
        this.listparam.state = code;
        this.$nextTick(()=>{
          this.$refs.clist.refreshData();
        });
    },
    receiveData:function(type,data){
      if(type=="refresh"){
        this.listData = data;
        this.nodata = false; 
        if(!data || data['length']==0){
          this.nodata = true;
        }
      }else{
        this.listData.push(...data);
      }
    },
    openCenter(){
      navigator.push(asCore.localpath + 'tailor/app/myinfo/couponCenter.js');
    }
  }
};
</script>
<style scoped>
.iconfont {
    font-family:iconfont;
}
.wrapper {
  background-color: #dedfe1;
}
.right-title {
  color: #fff;
  font-size: 32px;
}
.x-nodata {
  position:absolute;
  top: 190;
  bottom: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  
}
.x-nodata-icon {
  margin-top:-200;
  font-size:200px;
  color:#a1a1a1;
}
.x-nodata-font {
  font-size:30px;
  color:#a1a1a1;
  text-align: center;
  width: 750px;
}
</style>

